Scale and proportion in UX design UX 尺度（大小比例）

什麼是尺度（Scale）？

尺度指的是設計中某個元素相對於其他元素的大小關係。透過調整元素的大小，可以：

• 突出重點（例如把重要按鈕放大）

• 引導使用者注意力（像放大鏡一樣聚焦某區域）

• 表達對比與相似性（同尺寸 = 相似，大尺寸差異 = 差異）

• 構建視覺層級（如H1字型最大，H2次之）

示例：

• 在標題排版中，H1最大，表明是最重要的資訊。

• 字型的大小調整可以清楚地傳達資訊層級。

什麼是比例（Proportion）？

比例強調的是 元素之間的大小平衡關係。也就是說：

• 如果一個元素變大，其他相關元素也應按比例調整，否則會顯得不協調。

• 比例確保整個介面在視覺上保持和諧與一致性。

示例：

• 三個狗狗圖示本來大小一致（比例協調）。

• 放大其中一個圖示後，比例就不對稱了，視覺會感到不適。

如何在 Mockup 中應用尺度與比例？

• 相同尺度的元素會被認為是平等或類似的。

• 比例失調會讓設計看起來不平衡甚至令人不適。

• 如果需要強調某個元素（例如狗狗選擇介面中的 Michael 和 Melissa），放大圖片會有強調作用，但要避免干擾整體平衡。

注意：如果不是故意要強調，就應保持相同比例，以避免誤導使用者。

可訪問性視角下的尺度與比例

• 重要元素應當足夠大，以便視覺障礙或行動障礙使用者容易點選或看到。

• 保持一致比例有助於輔助技術（如放大鏡、螢幕閱讀器）正確解析介面。

• 尺度和比例的調整要考慮不同使用者裝置和需求，例如在大屏和小屏之間也要保持設計一致性。